<script setup>
import { Edit, Setting, CollectionTag, Search } from '@element-plus/icons-vue'
import { userGetMyService } from '@/api/user.js'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores'
import { collectionList ,collectDelete} from "../../api/collect";
import { userPublishList } from "../../api/news";

const errorHandler = () => true
const router = useRouter()

// 用户信息
const userData = ref()
const userStore = useUserStore()
//收藏
const collectionsObject = ref()
const collections = ref()
//发布
const publishsObject = ref()
const publishs = ref()

onMounted(async () => {
  const res = await userGetMyService()
  userData.value = res.data.data
  userStore.getUser()
  await fetchData()
})
// 编辑信息的弹层
const dialog = ref()
const onEditChannel = async () => {
  await dialog.value.open()
}
// 刷新用户信息
const getMessage = async (msg) => {
  if (msg) {
    const res = await userGetMyService()
    userData.value = res.data.data
    userStore.getUser()
  }
}

//设置菜单
const handleCommand = async (command) => {
  if (command == 'logout') {
    // 退出登录
    await ElMessageBox.confirm('你确认要进行退出么', '温馨提示', {
      type: 'warning',
      confirmButtonText: '确认',
      cancelButtonText: '取消'
    })
    userStore.removeToken()
    userStore.setUser({})
    router.push('/login')
  } else {
    router.push('/login')
  }
}

// 基础信息动态下拉框
const bese = ref(true)
const beseHeight = ref('250px')
const beseDown = () => {
  bese.value = !bese.value
  beseHeight.value = bese.value ? '250px' : '16px'
}

const activeName = ref('最近')

// 去发布/浏览
const goToPage = (val) => {
  if (val === 1) {
    router.push('/userReleaseNews') //发布
  } else if (val === 2) {
    router.push('/newsHomepage') // 主页
  } else {
    ElMessage.warning('当前没有活动！')
  }
}
//取消收藏
const unCollect = async(collection) => {
  try {
    let id = parseInt(newsId)
    const res = collectDelete(collection)
    console.log(res)
  } catch(error) {
    Promise.reject(error)
  }
  await fetchData()
}
//刷新数据
const fetchData = async () => {
  try {
    const { data } =  await collectionList(0,8)
    collectionsObject.value = data.data
    collections.value = collectionsObject.value.rows
  } catch (error) {
    Promise.reject(error)
  }
  try {
    const { data } =  await userPublishList(0,8)
    publishsObject.value = data.data
    publishs.value = publishsObject.value.rows
    console.log(publishs.value)
  } catch (error) {
    Promise.reject(error)
  }
}
</script>

<template>
  <div class="big-box" v-if="userData">
    <!-- 头部背景图片 -->
    <div class="background">
      <img src="/src/assets/user_background.png" class="image" />
      <div class="gradient-layer"></div>
    </div>
    <!-- 头部背景文字 -->
    <div class="background-text">
      第三届“一带一路” <br />
      国际合作高峰论坛
    </div>
    <!-- 用户 -->
    <div class="user-box">
      <!-- 用户头像部分 -->
      <div class="user-head">
        <el-avatar
          :size="90"
          :src="userData.avatar"
          style="position: absolute; left: 60px; top: 10px"
          @error="errorHandler"
        >
          <img
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          />
        </el-avatar>
        <div style="margin-left: 110px; width: 100%">
          <div
            style="font-size: 22px; font-weight: bold; display: flex; align-items: center"
          >
            <div>{{ userData.nickname }}</div>
            <el-tag
              effect="dark"
              type="danger"
              round
              style="margin-left: 10px"
              v-if="userData.userType === 2"
            >
              管理员
            </el-tag>
            <el-tag
              effect="dark"
              round
              style="margin-left: 10px"
              v-if="userData.userType <= 2"
            >
              新闻机构认证
            </el-tag>
            <el-tag effect="dark" type="info" round style="margin-left: 10px">
              普通用户
            </el-tag>
          </div>
          <!-- 个性签名 -->
          <div style="margin: 15px; color: #828181">
            {{ userData.signature }}
          </div>
          <div style="font-size: 14px; color: #828181">IP地址：广西</div>
        </div>
        <!-- 设置类 -->
        <div style="display: flex">
          <el-button round :icon="Edit" @click="onEditChannel()">编辑资料</el-button>
          <el-dropdown
            placement="bottom-end"
            @command="handleCommand"
            style="margin: 0 10px"
          >
            <el-button round :icon="Setting">设置</el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="password" :icon="EditPen">
                  重置密码
                </el-dropdown-item>
                <el-dropdown-item command="logout" :icon="SwitchButton">
                  退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

          <el-button round :icon="CollectionTag">认证信息</el-button>
        </div>
      </div>
      <!-- 用户身体部分 -->
      <div class="user-body">
        <div class="user-left">
          <!-- 浏览信息模块 -->
          <div class="release">
            <div style="font-weight: bold">浏览信息</div>
            <div class="divider"></div>
            <div
              style="
                display: flex;
                width: 100%;
                justify-content: space-around;
                align-items: center;
                text-align: center;
                margin-top: 30px;
                font-size: 14px;
              "
            >
              <div>
                <div>
                  <el-icon style="margin-right: 2px"><EditPen /></el-icon>发布量
                </div>
                <div style="margin: 10px">2</div>
              </div>
              <div>
                <div style="display: flex; align-items: center">
                  <el-icon style="margin-right: 2px"><ChatRound /></el-icon>评论量
                </div>
                <div style="margin: 10px">23</div>
              </div>
              <div>
                <div style="display: flex; align-items: center">
                  <el-icon style="margin-right: 2px"><Star /></el-icon>收藏量
                </div>
                <div style="margin: 10px">197</div>
              </div>
            </div>
          </div>
          <div></div>
          <div class="base" :style="{ height: beseHeight }">
            <div
              style="
                font-weight: bold;
                display: flex;
                align-items: center;
                justify-content: space-between;
              "
            >
              基础信息
              <el-icon v-show="bese" @click="beseDown"><ArrowDown /></el-icon>
              <el-icon v-show="!bese" @click="beseDown"><ArrowRight /></el-icon>
            </div>
            <div class="divider"></div>
            <div class="baseinfo">
              <div style="margin: 23px 0">
                登录天下新闻的时间：{{ userData.loginTime }}
              </div>
              <div style="margin: 23px 0">邮箱：{{ userData.email }}</div>
              <div style="margin: 23px 0">账号：{{ userData.userId }}</div>
              <div style="margin: 23px 0">年龄：{{ userData.age }}</div>
              <div style="margin: 23px 0">欢迎登录天下新闻，祝你度过美好的一天！</div>
            </div>
          </div>
        </div>
        <!-- 主体菜单 -->
        <div class="user-right">
          <el-input
            class="search"
            v-model="searchText"
            size="small"
            placeholder="搜TA的内容"
            @keyup.enter="handleSearch"
            :suffix-icon="Search"
          />
          <el-tabs v-model="activeName">
            <el-tab-pane label="最近" name="最近">
              <el-empty description="暂无文章">
                <el-button type="primary" round style="width: 150px" @click="goToPage(1)"
                  >去发布</el-button
                >
              </el-empty>
            </el-tab-pane>
            <el-tab-pane label="发布" name="发布">
<!--              <el-empty description="暂无文章">-->
<!--                <el-button type="primary" round style="width: 150px" @click="goToPage(1)"-->
<!--                  >去发布</el-button-->
<!--                >-->
<!--              </el-empty>-->

              <el-scrollbar height="345px">
                <div v-for="publish in publishs" :key="publish.newsId" class="new">
                  <div class="left"><img :src="publish.cover" ></div>
                  <div class="right">
                    <div class="title"> 【 {{publish.newsType}} 】  {{publish.title}}</div>
                    <div class="content">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{publish.newsContent}}</div>
                    <div class="msg">
                      {{ publish.userId }} | {{ publish.publishTime }}
<!--                      <div class="uncollect" @click="unCollect(collection)">取消收藏</div>-->
                    </div>
                  </div>
                </div>
              </el-scrollbar>

            </el-tab-pane>
            <el-tab-pane label="收藏" name="收藏">
<!--              <el-empty description="暂无收藏">-->
<!--                <el-button type="primary" round style="width: 150px" @click="goToPage(2)"-->
<!--                  >去浏览</el-button-->
<!--                >-->
<!--              </el-empty>-->
              <el-scrollbar height="345px">
                <div v-for="collection in collections" :key="collection.newsId" class="new">
                  <div class="left"><img :src="collection.cover" ></div>
                  <div class="right">
                    <div class="title"> 【 {{collection.newsType}} 】  {{collection.title}}</div>
                    <div class="content">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{collection.newsContent}}</div>
                    <div class="msg">
                      {{ collection.userId }} | {{ collection.publishTime }}
                      <div class="uncollect" @click="unCollect(collection)">取消收藏</div>
                    </div>
                  </div>
                </div>
              </el-scrollbar>


            </el-tab-pane>
          </el-tabs>

          <div style="display: flex; align-items: center; justify-content: space-between">
            创作活动
            <div
              style="display: flex; align-items: center; font-size: 15px; color: #828181"
              @click="goToPage(3)"
            >
              查看更多<el-icon style="margin-left: 5px"><ArrowRight /></el-icon>
            </div>
          </div>
        </div>
      </div>
    </div>
    <EditDialog ref="dialog" @get-message="getMessage"></EditDialog>
  </div>
</template>

<style scoped>
.big-box {
  display: flex;
  flex-direction: column; /*主轴方向为垂直方向*/
  align-items: center;
}
.background {
  position: relative;
  height: 700px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gradient-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, #f4f4f4, rgba(255, 255, 255, 0));
}

.background-text {
  position: absolute;
  top: 100px;
  font-family: 'Your-Artistic-Font', cursive;
  font-size: 45px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 3px 5px 4px rgba(15, 64, 245, 0.61);
}

.user-box {
  position: absolute;
  top: 300px;
  border-radius: 15px 15px 0 0;
  padding: 20px;
  width: 1350px;
  height: 130px;
}

.user-head {
  display: flex;
  background-color: white;
  border-radius: 15px 15px 0 0;
  padding: 20px 40px;
  height: 100%;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}

.user-body {
  display: flex;
}
.user-left {
  margin-top: 10px;
  width: 25%;
}

.user-left .release {
  background-color: white;
  padding: 20px;
  height: 120px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}

.divider {
  content: '';
  background-color: #c8c8c8;
  margin: 15px 0;
  height: 1px;
  width: 100%;
}

.user-left .base {
  margin-top: 10px;
  background-color: white;
  padding: 20px;
  height: 250px;
  overflow: hidden;
  transition: height 0.5s ease;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}

.baseinfo {
  font-size: 14px;
}

.user-right {
  position: relative;
  background-color: white;
  margin-top: 10px;
  margin-left: 10px;
  padding: 20px;
  height: 100%;
  width: 75%;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}

.user-right .search {
  position: absolute;
  width: 200px;
  right: 50px;
}
/*收藏栏*/
.new {
  width:90%;
  height:140px;
  margin:0 auto;
  display: flex;
  margin-bottom: 20px;
}
.left {
  display: inline-block;
  height:100%;
  width:240px;
  /*border: 1px solid blue;*/
  margin-right: 20px;
}
img {
  width:100%;
  height:100%;
}
.right {
  padding-top: 10px;
  /*border: 1px solid red;*/
  display: inline-block;
  height:100%;
  width:70%;
  line-height: 1.5;
}
.content{
  margin-top: 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  color:#828181;
  font-size: 12px;
}
.msg {
  margin-top: 20px;
  color:#828181;
  font-size: 12px;
}
.uncollect {
  display: inline-block;
  margin-left: 10px;
  cursor: pointer;
}
.uncollect:hover {
  color: red;
}
.footer {
  margin-top: 25px;
  margin-left: 45%;
}
</style>
